<template>
  <div class="search-page">
    <v-title title="搜索" />
    <arrow />
    <loading :show="loading" />
    <div class="keyword" @keyup.enter="submit">
      <cube-input ref="input" v-model="keyword" placeholder="请输入关键字" clearable />
    </div>
    <template v-if="keyword.length === 0">
      <div class="title">
      <span class="icon">
        <i></i>
      </span>
        <span class="text">
        搜索历史
      </span>
        <i class="cubeic-delete delete" @click="clearHistory"></i>
      </div>
      <ul class="history-list" v-if="historyList.length > 0">
        <li v-for="(item, index) in historyList" :key="index" class="history-item" @click="clickHistory(item)">
          {{ item }}
        </li>
      </ul>
      <div v-else class="history-list">
        暂无搜索历史...
      </div>
    </template>
    <template v-if="keyword.length > 0">
      <div class="title">
      <span class="icon">
        <i></i>
      </span>
        <span class="text">
        搜索结果
      </span>
      </div>
      <div v-if="productList.length > 0">
        <list :list="productList" />
      </div>
      <div class="product-list" :class="{'active': disabled}" v-else>
        {{ disabled ? '暂无相关数据...' : '请按回车键搜索' }}
      </div>
    </template>
    <template v-if="keyword.length === 0">
      <div class="title">
      <span class="icon">
        <i></i>
      </span>
        <span class="text">
        热搜榜
      </span>
      </div>
      <ul class="hot-list">
        <li
          v-for="(item, index) in hotList"
          :key="index"
          @click="$router.push(`/product/detail/${item.id}`)"
        >
          <span class="index" :class="{'top': index <= 2}">{{ index + 1 }}</span>
          <span class="text two-lines">{{ item.title }}</span>
        </li>
      </ul>
    </template>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import { mapGetters } from 'vuex'
import base64 from '@/util/base64'
import api from '@/api'
import { isWxBrowser } from '@/util/wx'
import List from '@/views/product/components/list'
export default {
  name: 'Search',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
    List
  },
  computed: {
    ...mapGetters({
      originHistory: 'Search/history',
      hotList: 'Search/hotList'
    })
  },
  data() {
    return {
      loading: false,
      keyword: '',
      historyList: [],
      productList: [],
      disabled: false
    }
  },
  watch: {
    keyword(v) {
      this.disabled = false
    }
  },
  methods: {
    submit() {
      if (!this.disabled) {
        this.saveHistory()
        this.disabled = true
        this.loading = true
        const user = this.$store.getters['ExecUser/info']
        api.Search.submit({
          is_wx: isWxBrowser() ? '是' : '否',
          user_id: user ? user.id : 0,
          keyword: this.keyword
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          this.productList = data
        }).finally(() => {
          this.loading = false
          // this.disabled = false
        })
      }
    },
    saveHistory() {
      let history = []
      if (this.originHistory) {
        history = [this.keyword].concat(this.originHistory)
      } else {
        history = [this.keyword]
      }
      // unique
      history = [...new Set(history)]
      const num = 20
      if (history.length > num) {
        history = history.slice(0, num)
      }
      this.$store.dispatch('Search/set_history', history).then(() => {
        this.historyList = history
      })
    },
    clearHistory() {
      this.$store.dispatch('Search/clear_history').then(() => {
        this.historyList = []
      })
    },
    clickHistory(item) {
      this.keyword = item
      this.$refs.input.focus()
      this.submit()
    },
    /**
     * get hot list
     * 1) vuex
     * 2) localstorage
     * 3) redis
     * 4) db
     */
    getHot() {
      if (this.hotList === null || this.hotList.length === 0) {
        this.loading = true
        api.Search.hot().then(response => {
          let { data } = response
          data = base64.parse(data)
          this.$store.dispatch('Search/set_host', data).then()
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.getHot()
    if (this.originHistory !== null) {
      this.historyList = [...this.originHistory]
    } else {
      this.historyList = []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.input.focus()
    })
  }
}
</script>

<style scoped lang="stylus">
.search-page
  padding-top 45px
  .keyword
    margin 10px
    .cube-input-field
      color red !important
  .title
    margin 10px 10px 0 10px
    background white
    height 30px
    line-height 30px
    display flex
    position relative
    border-radius 5px
    .icon
      width 22px
      //background red
      i
        background $main_color
        width 4px
        height 15px
        display block
        margin-top 7.5px
        margin-left 10px
        border-radius 5px
    .text
      flex 1
      text-align left
    .delete
      position absolute
      right 10px
      color $main_color
      font-size 20px
  .hot-list
    background white
    margin 5px 10px 10px 10px
    border-radius 5px
    padding 10px
    li
      display flex
      margin-bottom 10px
      .index
        font-weight 700
        font-size 16px
        width 25px
        text-align right
        padding-right 10px
        line-height 25px
        &.top
          color red
          font-size 18px
      .text
        flex 1
        text-align left
        line-height 25px
  .history-list
    padding 10px
    background white
    margin 10px
    text-align left
    display flex
    flex-wrap wrap
    .history-item
      background #eee
      margin-right 10px
      margin-bottom 10px
      padding 7.5px 10px
      border-radius 10px
  .product-list
    padding 10px
    background white
    margin 10px
    text-align left
    &.active
      color red
      min-height 100px
</style>
